<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

</head>
<body>
<ul id="messageList"></ul>
<input id="message" placeholder="Type your message here..." type="text">
<button id="sendButton">Send</button>


<script>
    let stompClient = null;

    function connect() {
        let socket = new SockJS('/chat');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function () {
            stompClient.subscribe('/topic/public', function (message) {
                showMessage(JSON.parse(message.body).content);
            });
        });
    }

    function sendMessage() {
        let messageInput = document.getElementById('message');
        let messageContent = messageInput.value.trim();

        if (messageContent) {
            let chatMessage = {
                content: messageContent,
                sender: 'User'
            };
            stompClient.send("/app/sendMessage", {}, JSON.stringify(chatMessage));
            messageInput.value = '';
        }
    }

    function showMessage(message) {
        let messageElement = document.createElement('li');
        messageElement.textContent = message;
        document.getElementById('messageList').appendChild(messageElement);
    }

    document.getElementById('sendButton').addEventListener('click', sendMessage);
    connect();
</script>
</body>
</html>
